import { memo, useState } from 'react';
import { CategoryListProps } from '../../goods/components/types';
import styled from './index.module.css';
function CategoryList({ categories, urlChange, cur, border = true }: CategoryListProps) {
    const [active, setActive] = useState(cur);
    return (
        <div
            className={styled.category}
            style={border ? { borderBottom: '2px solid #e8edf3', paddingBottom: '10px' } : {}}
        >
            {categories.map((item) => {
                return (
                    <div
                        onClick={() => {
                            setActive(item.id);
                            window.history.replaceState('/goods', '', '/goods?category=' + item.id);
                            urlChange(item.id);
                        }}
                        className={[styled.item, active == item.id ? styled.active : ''].join(' ')}
                        key={item.id}
                    >
                        <div>{item.name.slice(0, -6)}</div>
                        <div>{item.name.slice(-5)}</div>
                    </div>
                );
            })}
        </div>
    );
}
export default memo(CategoryList);
